<template>
  <div class="check-execute-container">
    <h2>检查申请执行</h2>
    
    <!-- 检查申请列表 -->
    <el-table
      :data="checkApplies"
      border
      style="width: 100%"
      class="check-table">
      <el-table-column
        prop="patientName"
        label="患者姓名"
        width="120">
      </el-table-column>
      <el-table-column
        prop="itemName"
        label="项目名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="position"
        label="检查部位"
        width="120">
      </el-table-column>
      <el-table-column
        prop="isUrgent"
        label="是否加急"
        width="100">
        <template #default="scope">
          <el-tag :type="scope.row.isUrgent ? 'danger' : 'info'">
            {{ scope.row.isUrgent ? '加急' : '普通' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="检查结果"
        width="200">
        <template #default="scope">
          <el-input
            v-model="scope.row.result"
            :disabled="scope.row.completed"
            placeholder="请输入检查结果"
            clearable
            @change="handleResultChange(scope.row)">
          </el-input>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="150">
        <template #default="scope">
          <el-button
            size="small"
            :type="scope.row.completed ? 'success' : 'primary'"
            :disabled="!scope.row.result || scope.row.result.trim() === ''"
            @click="toggleComplete(scope.row)">
            {{ scope.row.completed ? '已完成' : '提交结果' }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

export default {
  name: 'CheckExecute',
  setup() {
    // 静态检查申请数据
    const staticCheckApplies = [
      {
        id: 1,
        patientName: '张三',
        itemName: '血常规检查',
        position: '血液',
        isUrgent: true,
        completed: false,
        result: ''
      },
      {
        id: 6,
        patientName: '张三',
        itemName: '心电图检查',
        position: '胸部',
        isUrgent: false,
        completed: false,
        result: ''
      },
      {
        id: 7,
        patientName: '小A',
        itemName: '一次性注射器',
        position: '无',
        isUrgent: true,
        completed: false,
        result: ''
      },
      {
        id: 3,
        patientName: '李四',
        itemName: '尿常规检查',
        position: '尿液',
        isUrgent: false,
        completed: false,
        result: ''
      },
      {
        id: 4,
        patientName: '王五',
        itemName: '心电图检查',
        position: '胸部',
        isUrgent: true,
        completed: false,
        result: ''
      },
      {
        id: 5,
        patientName: '赵六',
        itemName: '静脉输液',
        position: '右臂',
        isUrgent: false,
        completed: false,
        result: ''
      },
      {
        id: 2,
        patientName: '钱七',
        itemName: '肌肉注射',
        position: '左臂',
        isUrgent: false,
        completed: false,
        result: ''
      }
    ]

    const checkApplies = ref([])

    // 从本地存储获取已完成的检查数据
    const getCompletedChecks = () => {
      const completed = localStorage.getItem('completedChecks')
      return completed ? JSON.parse(completed) : []
    }

    // 初始化检查申请数据
    const initCheckApplies = () => {
      const completedChecks = getCompletedChecks()
      checkApplies.value = staticCheckApplies.map(item => {
        const completedItem = completedChecks.find(c => c.id === item.id)
        return {
          ...item,
          completed: !!completedItem,
          result: completedItem ? completedItem.result : ''
        }
      })
    }

    // 处理结果变化
    const handleResultChange = (row) => {
      // 可以在这里添加结果验证逻辑
      console.log(`检查ID ${row.id} 的结果已更新: ${row.result}`)
    }

    // 切换完成状态
    const toggleComplete = (row) => {
      if (!row.result || row.result.trim() === '') {
        ElMessage.warning('请先填写检查结果')
        return
      }

      row.completed = !row.completed
      
      // 更新本地存储
      const completedChecks = getCompletedChecks()
      if (row.completed) {
        const existingIndex = completedChecks.findIndex(c => c.id === row.id)
        if (existingIndex > -1) {
          completedChecks[existingIndex] = { id: row.id, result: row.result }
        } else {
          completedChecks.push({ id: row.id, result: row.result })
        }
      } else {
        const index = completedChecks.findIndex(c => c.id === row.id)
        if (index > -1) {
          completedChecks.splice(index, 1)
        }
      }
      
      localStorage.setItem('completedChecks', JSON.stringify(completedChecks))
      
      if (row.completed) {
        ElMessage.success('检查结果已提交')
      } else {
        ElMessage.info('已取消完成状态')
      }
    }

    // 初始化
    onMounted(() => {
      initCheckApplies()
    })

    return {
      checkApplies,
      handleResultChange,
      toggleComplete
    }
  }
}
</script>

<style scoped>
.check-execute-container {
  padding: 20px;
}

.check-table {
  margin-top: 20px;
}
</style>